<!-- 首页-开始点餐组件 -->
<template>
	<view class="startOrder">
		<u-row>
			<u-col>
				<view class="startOrder-user">
					<u-row>
						<u-col>
							<view class="user-information">
								<u-row>
									<u-col span="1.5" offset="0.5">
										<u-avatar
											text="阳"
											fontSize="18"
											randomBgColor
											size="40"
										></u-avatar>
									</u-col>
									<u-col span="3.5">
										<u--text text="您好" color="#502314" bold size="16"></u--text>
										<u--text text="109****7272" color="#555555" size="15"></u--text>
									</u-col>
									<u-col span="2">
										<view class="user-border">
											<u--text text="积分" color="#555555" size="15" align="center"></u--text>
											<u--text text="999+" color="#502314" bold size="16" align="center"></u--text>
										</view>
									</u-col>
									<u-col span="2">
										<view class="user-border">
											
											<u--text text="卡券" color="#555555" size="15" align="center"></u--text>
											<u--text text="999+" color="#502314" bold size="16" align="center"></u--text>
										</view>
									</u-col>
									<u-col span="2">
										<view>
											<u--text text="余额" color="#555555" size="15" align="center"></u--text>
											<u--text text="999+" color="#502314" bold size="16" align="center"></u--text>
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="11" offset="0.5">
							<view class="start-order">
								<u-row>
									<u-col span="5.8">
										<view class="start self-service" @click="startOrder">
											<view class="order-title">
												<u--text text="自助点餐" bold size="22" align="center" color="#502314"></u--text>
												<u--text text="门店下单免排队" bold size="15" align="center" color="#502314"></u--text>
											</view>
											<view class="order-title order-icon">
												<u-icon name="../../static/icon/index/hanbaoyinliao.png" size="130rpx"></u-icon>
											</view>
											
										</view>
									</u-col>
									<u-col span="5.8" offset="0.4">
										<view class="start take-out">
											<view class="order-title">
												<u--text text="外送到家" bold size="22" align="center" color="#502314"></u--text>
												<u--text text="30分钟送到家" bold size="15" align="center" color="#502314"></u--text>
											</view>
											<view class="order-title order-icon">
												<u-icon name="../../static/icon/index/waimai.png" size="130rpx"></u-icon>
											</view>
											
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="11" offset="0.5">
							<view class="centre">
								 <u-grid
									col="4"
									:border="false"
								>
									<u-grid-item
										v-for="(baseListItem,baseListIndex) in baseList"
										:key="baseListIndex"
									>
										<u-icon
											:customStyle="{paddingTop:20+'rpx'}"
											:name="baseListItem.name"
											:size="30"
										></u-icon>
										<text class="grid-text">{{baseListItem.title}}</text>
									</u-grid-item>
								</u-grid>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"startOrder",
		data() {
			return {
				 baseList: [{
					name: '../../static/icon/index/chuzhizhongxin.png',
					title: '储值中心'
					},
					{
						name: '../../static/icon/index/lingquanzhongxin.png',
						title: '领券中心'
					},
					{
						name: '../../static/icon/index/jifenduihuan.png',
						title: '积分兑换'
					},
					{
						name: '../../static/icon/index/jiaruqunliao.png',
						title: '加入群聊'
					}
				]
			};
		},
		methods:{
			startOrder(){
				uni.navigateTo({
					url: '../selfOrderingMachine/selfOrderingMachine'
				});
			}
		}
	}
</script>

<style lang="scss">
	//整体框架
	.startOrder{
		background-color: #FFFFCC;
		
		//用户信息、进入点餐框架
		.startOrder-user{
			position: relative;
			height: 600rpx;
			background: linear-gradient(to right, #f6ba18, #feec4f);
			border-radius: 50rpx 50rpx 0 0;
			
			//用户信息
			.user-information{
				position: relative;
				top: 25rpx;
				
				//用户信息边框样式
				.user-border{
					border-right: 3rpx solid #aaaaaa;
				}
			}
			
			//进入点单按钮
			.start-order{
				position: relative;
				top: 45rpx;
				
				//自助点餐、外送点餐框体
				.start{
					background-color: #faf5ed;
					height: 150px;
					border-radius: 17rpx;
					
					//点餐框体标题
					.order-title{
						position: relative;
						top: 30rpx;
					}
					
					//点餐框体图标
					.order-icon{
						display: flex;
						justify-content: center;  
					}
				}
				
				
				
				//自助点餐框体
				.self-service{
					background-image: url('../../static/icon/xingxing.png');
					background-position: left;
				}
				
				//外送点餐框体
				.take-out{
					background-image: url('../../static/icon/xingxing.png');
					background-position: right;
				}
			}
			
			//底部中心功能框体
			.centre{
				position: relative;
				top: 60rpx;
				height: 130rpx;
				
				//功能名称
				.grid-text {
				font-size: 15px;
				font-weight: bold;
				color: #502314;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
    }
			}
		}
	}
</style>